<template>
  <div class="bannerBackground">
    <div class="banner page_content">
      <div class="bannerText"><img src="@/assets/bannerText.png" alt=""></div>
      <div class="bannerButton">
        <li @click="goToProject('1')"><router-link to="/project?id=1" class="font">

            <div class="titleLog">建筑设计</div>
            <div class="title">Architectural Design</div>
          </router-link>

          <router-link to="/project?id=1" class="lastLi"><img src="@/assets/bg-right.png"></router-link>
        </li>

        <li @click="goToProject('2')"><router-link to="/project?id=2" class="font">
            <div class="titleLog">室内设计</div>
            <div class="title">Interior Design</div>
          </router-link>
          <router-link to="/project?id=2" class="lastLi"><img src="@/assets/bg-right.png" alt=""></router-link>
        </li>
        <li @click="goToProject('3')"><router-link to="/project?id=3" class="font">
            <div class="titleLog">文创街区</div>
            <div class="title">Culture Creativity Block</div>
          </router-link>
          <router-link to="/project?id=3" class="lastLi"><img src="@/assets/bg-right.png" alt=""></router-link>
        </li>
      </div>
      <p class="icp">沪ICP备08110495号-1</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter(); // 获取 router 实例
const goToProject = (id) => {
  router.push({ path: `/project`, query: { id } }); // 跳转到 /project?id=id
};
</script>

<style lang="scss" scoped>
.bannerBackground {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/banner3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    animation: changeBackground 15s steps(1) infinite forwards, zoomInOut 5s infinite forwards;
  }

  @keyframes changeBackground {
    0% {
      background-image: url('@/assets/banner1.jpg');
      background-size: cover;
      background-position: center;
    }

    30% {
      background-image: url('@/assets/banner2.jpg');
      background-size: cover;
      background-position: center;
    }

    60% {
      background-image: url('@/assets/banner3.jpg');
      background-size: cover;
      background-position: center;
    }

    100% {
      background-image: url('@/assets/banner3.jpg');
      background-size: cover;
      background-position: center;
    }
  }

  @keyframes zoomInOut {
    0% {
      background-size: 100%;
    }

    100% {
      background-size: 120%;
      filter: brightness(0); // 放大并调整亮度
    }
  }

  .banner {
    position: relative;

    .icp {
      position: absolute;
      bottom: 8px;
      color: #eeeeee80;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
    }
  }


  .bannerText {
    position: absolute;
    top: 12rem;
    width: 5.73rem;
    height: 2.36rem;
  }

  .bannerButton {
    display: flex;
    position: absolute;
    bottom: 40px;
    color: white;
    justify-content: space-between;
    width: 100%;

    li {
      position: relative;
      display: inline-block;
      width: 33%;
      height: 180px;
      background-image: url('@/assets/bannerBorder.png');
      background-size: 100% 100%;
      /* 背景图片宽度设置为100% */



      .font {
        color: #fff;
        font-size: 2.2rem;
        color: #eee;
        display: inline-block;
        width: 50%;
        margin-top: 25px;
        margin-left: 34px;

        .titleLog {
          margin-top: 15px;
        }

        .title {
          font-size: 1.5rem;
          color: #999;
          width: 200%;
          // margin-top: -44px;
        }
      }

      .lastLi {
        position: absolute;
        display: flex;
        right: 15px;
        bottom: 20px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #474747;
        width: 30px;
        height: 30px;
        transition: background-color 0.6s ease;
        /* 设置背景颜色变化的动画 */



        img {
          width: 13px;
          height: 13px;
        }
      }
    }

    li:hover {
      .lastLi {
        background-color: black;
      }
    }
  }
}
</style>